<!--
 * @docName: oldPaymentPage.vue
 * @Author: mwl
 * @Date: 2024/8/20
 * @LastEditors: zhongxiong
 * @LastEditTime: 15:24
-->
<template>
  <div class='content'>
    <div class='header-div'>
      <span class='title'>账户管理</span>
      <div class='header-box'>
        <div>订单金额：<span>{{ infoData.paymentAmount }}</span>元</div>
      </div>
    </div>
    <!--订单列表回显-->
    <div style='border-bottom: 1px solid #ccc;padding-bottom: 30px;margin-bottom: 30px'>
      <a-table
        ref="table"
        bordered
        class='payment-order'
        rowKey="id"
        :columns="columns"
        :dataSource="infoData.orderPayInfoUnpaidVos"
        :pagination="false">
        <span slot="entName" slot-scope="text, record">
            <j-ellipsis v-if='text && text.length > 0' :value="text" :length="20" />
            <span v-else>名称待定：（ID：{{record.entId}}）</span>
        </span>
        <span slot="subitem" slot-scope="text, record">
            {{subitemTypeData.tableTypeKeyName[text]}}
        </span>

        <span slot="protocolType" slot-scope="text, record">
            {{{1:'渠道总',2:'非渠道总'}[text]}}
        </span>
        <span slot="orderStatus" slot-scope="text, record">
            {{{0:'待支付',1:'支付中',2:'已支付',3:'退款中',4:'全额退款',5:'部分退款',6:'已取消',7:'支付失败'}[text]}}
        </span>
        <span slot='payerType' slot-scope="text, record">
            {{{1:'渠道支付',2:'企业支付',3:'渠道微信扫码',4:'渠道支付宝扫码',5:'企业微信扫码',6:'企业支付宝扫码',7:'渠道税费账户',8:'企业税费账户',9:'线下支付',10:'招行聚合支付'}[text]}}
          </span>
        <span slot="paymentAmount" slot-scope="text, record">
            <span>{{Math.round(text * 100)/10000}} 元</span>
        </span>
      </a-table>
    </div>
    <!--  支付选择模块  -->
    <div class='content-div' v-if='paymentShow'>
      <div class='title'>请选择支付方类型 <span class='text' v-if='orderlistNew.length==0'>服务费发票将开具给支付方，请谨慎选择！</span></div>
      <div class='div-payment'>
        <!--        1:'渠道支付',2:'企业支付',3:'渠道微信扫码',4:'渠道支付宝扫码',5:'企业微信扫码',6:'企业支付宝扫码'-->
        <div v-for='(item,index) in infoData.orderPayInfoCashierVos'
             v-bind:class='{bg:index==isactive}'
             @click='clickEvent(index,item.type)' class='div-template'>
          <div>
            <div class='pos-div'><a-icon type="deployment-unit" class='icontype deployment-unit' /></div>
            <div>
              <a-icon v-if='item.balance == null && item.type == 9' type="edit" class='icon-type scan' />
              <a-icon v-else-if='item.balance == null' type="scan" class='icon-type scan' />
              <a-icon v-else type="credit-card" class='icon-type credit-card' />
              {{{1:'渠道通用账户支付',2:'企业通用账户支付',3:'微信扫码',4:'支付宝扫码',5:'企业微信扫码',6:'企业支付宝扫码',7:'渠道税费账户',8:'企业税费账户',9:'线下支付',10:'招行聚合支付'}[item.type]}}
            </div>
            <div class='balance' v-if='item.balance != null'>账户余额：<span>{{ Math.round(item.balance * 100)/10000 }}</span> 元</div>
          </div>
        </div>
      </div>
      <div><a-button type='primary' @click='paymentEvent()'>前往支付</a-button></div>
    </div>
    <!--  支付模块  -->
    <div class='content-div' v-else>
      <div v-if='bePaidShow'>
        <div class='title'><span>您选择了{{{1:'渠道通用账户支付',2:'企业通用账户支付',3:'微信扫码',4:'支付宝扫码',5:'企业微信扫码',6:'企业支付宝扫码',7:'渠道税费账户',8:'企业税费账户',9:'线下支付',10:'招行聚合支付'}[paymentMode]}}</span> <span class='text'  v-if='orderlistNew.length==0'>服务费发票将开具给支付方，请谨慎选择！</span></div>
        <div class='cont-box'>
          <div class='headers'>
            <div class='cont-header' v-if='paymentMode == 1 || paymentMode == 2 || paymentMode == 7 || paymentMode == 8'>
              {{{1:'渠道通用账户支付',2:'企业通用账户支付',7:'渠道税费账户',8:'企业税费账户'}[paymentMode]}}<span class='balance'>（账户余额：<span>{{{1:Math.round(channelBalance * 100)/10000,2:Math.round(entBalance * 100)/10000,7:Math.round(channelTaxBalance * 100)/10000,8:Math.round(entTaxBalance * 100)/10000}[paymentMode]}}</span> 元</span>）
            </div>
            <div class=''><a-button type='primary' style='margin-top: 10px' @click='fallbackEvent()'>重新选择</a-button></div>
          </div>
          <div v-if='paymentMode == 1 || paymentMode == 2 || paymentMode == 7 || paymentMode == 8'>
            <div v-if='infoData.checkPaypwd == 1' class='payment-password-mode'>
              <div class='title' style='padding-bottom: 20px'>请输入支付密码</div>
              <a-form-model
                style="width: 600px;"
                ref="ruleForm"
                :model="formset"
                :rules="validatorRules"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-form-model-item label="支付密码" prop="password">
                  <a-input-password allow-clear v-model="formset.password" :autoComplete="autoCom" :type='inputType' autocomplete="off" @change="changeInputType" />
                </a-form-model-item>
                <div class=''><a-button type='primary' @click='paymentGoEvent()' v-prevent-re-click>确认支付</a-button></div>
              </a-form-model>
            </div>
            <div v-else-if='infoData.checkPaypwd == 0' class='payment-password-mode'>
              <div class='title' style='padding-bottom: 20px'>您未设置支付密码，请先完成设置</div>
              <a-form :form="form" style="width: 600px;">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="新支付密码">
                  <a-input-password allow-clear placeholder="请输入支付密码" v-decorator="[ 'passwd', validatorRulesSet.passwd]" :type="inputType" :autoComplete="autoCom" @change="changeInputType" />
                </a-form-item>

                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="确认新支付密码">
                  <a-input-password allow-clear @blur="handleConfirmBlur" placeholder="请确认新密码" v-decorator="[ 'passwdOk', validatorRulesSet.passwdOk]" :type="inputType" :autoComplete="autoCom" @change="changeInputType" />
                </a-form-item>

                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="手机验证码">
                  <a-input type="text" placeholder="请输入手机验证码" v-decorator="[ 'captcha', validatorRulesSet.captcha]"  autocomplete="off" />
                  <a-button type="primary" @click="send" style="margin-left:20px;" :disabled="disabledCodeBtn">{{codeText}}</a-button>
                </a-form-item>

                <a-button type="primary" @click="addCategory">确 认</a-button>

                <a-form-item>
                  <p class="tips" v-if="isShow">您已完成支付密码的设置，如忘记密码，可在此页面进行修改</p>
                </a-form-item>
              </a-form>
            </div>
          </div>
          <div v-else>
            <div>{{{0:'待支付',1:'支付中',2:'已支付',3:'退款中',4:'全额退款',5:'部分退款',6:'已取消',7:'支付失败'}[paymentTips]}}</div>
            <div class='qr'>
              <div v-if='qrLoding' class='qr-loding'><a-spin tip="加载中..."/></div>
              <vue-qr
                v-else
                :text="qrcode"
                :logoSrc="img"
                :logoScale="30"
                :size="280">
              </vue-qr>
            </div>
          </div>

        </div>
      </div>
      <div v-else>
        <a-result
          status="success"
          title="支付成功"
        >
          <template #extra>
            <a-button key="console" type="primary" @click='goTo(1)'>
              去首页
            </a-button>
            <a-button key="buy" @click='goTo(2)'>
              返回上一页
            </a-button>
          </template>
        </a-result>
      </div>
    </div>

  </div>
</template>

<script>
import VueQr from 'vue-qr'
import { getOrderPayUnpaidCashier, getOrderPayUnpaidPay,getSetPaypwd,getSendSmsCaptcha,getOrderPayManualResult} from '@api/account'
import * as Utils from '@/utils/util'
import { cloneObject, conversionElement, encryptIt, Storage } from '@/utils/util'
export default {
  name: 'oldPaymentPage',
  components:{
    VueQr
  },
  data(){
    return{
      taxLIst:[1010, 1011, 1012, 1014, 1015],//税费账户支付项
      my:null,
      myTest:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCs7eVl3hduxnpyKhwI27seelA6cfr0ghTFVsMuaFW68KDa0Xv3NANEQ1YjWYVM/AUllHSDq0ORdIGm2suKCsmGuLnDK1TK7LbOZLgvkDz+Ft+06Y0ZzjILzl0SUtawE+fD6dpebAeD+dOAcl9EzU536ASLx0rsziOZIwcN3aWx5wIDAQAB',
      myPro:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDpIyqMNYBRzfwVhL+P6jav7rGkNZQ0nu+7G7qe1g7mThM9D6Dc717sN1ATDgPxJzgI+NEQ+wx2B1HpUcs4pigyXbnL96qgHrsTe6ZX9YyicsaLz5FM7nujypfVAkfr/VQLEA8z9L7XsAh+Hm6g0WCdSPqdWHY0lS0ImOXth3PgjwIDAQAB',
      formset:{},
      qrcode:null,
      setPassword:false,
      autoCom: 'off',
      inputType:'text',
      paymentShow:true,
      bePaidShow:true,
      isactive:null,
      qrLoding:false,
      channelBalance:0,
      entBalance:0,
      channelTaxBalance:0,
      entTaxBalance:0,
      paymentMode:null,
      infoData:{},
      orderSubitem:[],
      orderlistNew:[],
      subitemTypeData:[],
      tableData:[],
      columns: [
        {
          title: '创建时间',
          align: 'center',
          width: 180,
          dataIndex: 'createTime',
          scopedSlots: {customRender: 'createTime'},
        },
        {
          title: '订单号',
          align: 'center',
          width: 120,
          dataIndex: 'orderNo',
          scopedSlots: {customRender: 'orderNo'},
        },
        {
          title: '交易关联企业',
          dataIndex: 'entName',
          align: 'center',
          width: 240,
          scopedSlots: {customRender: 'entName'},
        },
        {
          title: '合作模式',
          dataIndex: 'protocolType',
          align: 'center',
          width: 160,
          scopedSlots: {customRender: 'protocolType'},
        },
        {
          title: '交易类型',
          dataIndex: 'subitem',
          align: 'center',
          width: 130,
          scopedSlots: {customRender: 'subitem'},
        },
        {
          title: '交易状态',
          align: 'center',
          width: 120,
          dataIndex: 'orderStatus',
          scopedSlots: {customRender: 'orderStatus'},
        },
        {
          title: '交易金额',
          align: 'center',
          width: 100,
          dataIndex: 'paymentAmount',
          scopedSlots: {customRender: 'paymentAmount'},
        },
      ],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      validatorRules:{
        password:[{ required: true, message: '请输入支付密码!' }],
      },
      validatorRulesSet:{
        passwd:{
          rules: [{
            required: true, pattern: /^\d{6}$/ ,message: '请输入6位数字的新密码!',
          }, {
            validator: this.validateToNextPassword,
          }],
        },
        passwdOk:{
          rules: [{
            required: true,pattern: /^\d{6}$/ , message: '请确认新密码!',
          }, {
            validator: this.compareToFirstPassword,
          }],
        },
        captcha:{
          rules: [{
            required: true, pattern: /^.{6}$/ , message: '请输入六位短信验证码!',
          }],
        },
      },
      confirmDirty:false,
      form:this.$form.createForm(this),
      isShow: false,
      codeText: '发送验证码',
      disabledCodeBtn: false,
      img:null,
      paymentTips:null,
      codeTimer: null,//定时器
      codeTime: 12, // 限制1分钟后没请求到erp数据，不再继续请求
    }
  },
  created() {
    this.getOrderPayUnpaidCashierFun();
    this.subitemTypeData = Storage.get('SubitemType');
  },
  mounted() {
  },
  methods:{
    //密码不自动带入浏览器保存
    changeInputType(e){
      if(e.target.value !=''){
        this.inputType = 'password'
        this.autoCom = 'new-password'
      }else{
        this.inputType = 'text'
        this.autoCom = 'off'
      }
    },
    //选择支付
    clickEvent(index,type){
      //type支付方类型(1:'渠道账户支付',2:'企业账户支付',3:'渠道微信扫码',4:'渠道支付宝扫码',5:'企业微信扫码',6:'企业支付宝扫码')
      this.paymentMode = type;
      console.log(type);
      this.isactive=index;
    },
    //维护中
    underDevelopment(){
      this.$message.warning('维护中~~~')
    },
    //跳转支付
    paymentEvent(){
      const that = this;
      if(this.paymentMode){
        if(this.paymentMode == 9){
          this.$confirm({
            title: '线下支付方式需中雄管理员审核后支付成功，可能会导致订单延迟，请您确认是否使用线下支付！',
            okText: '我已联系管理员，确认线下支付',
            okType: 'primary',
            cancelText: '更换支付方式',
            onOk() {
              //
              that.paymentGoEvent();
            },
            onCancel() {
              console.log('Cancel');
            },
            class: 'test',
          });
        }else{
          this.paymentShow = false;
          console.log(111,this.paymentMode)
          if (this.paymentMode != 1 && this.paymentMode !=2 && this.paymentMode != 7 && this.paymentMode !=8){
            this.paymentGoEvent();
          }
        }
      }else{
        this.$message.warning('请选择支付类型')
      }
    },
    //回退
    fallbackEvent(){
      this.paymentShow = true;
      this.formset = {};
      this.clearCount();
    },
    //支付初始化
    getOrderPayUnpaidCashierFun(){
      let params ={}
      if(this.$route.query.po){
        let poString = this.$route.query.po;
        let po = Utils.Storage.get(po);
        params.orderNos = po[poString].value.orderNo;

      }
      if(this.$route.query.pi){
        let piString = this.$route.query.pi;
        let pi = Utils.Storage.get(pi);
        params.payInfo = pi[piString].value.payInfo;
      }
      getOrderPayUnpaidCashier(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          let data = res.result;
          this.infoData= data;
          this.infoData.paymentAmount = conversionElement(this.infoData.paymentAmount)
          for(var i = 0; i < data.orderPayInfoCashierVos.length; i++){
            if(data.orderPayInfoCashierVos[i].type == 1){
              this.channelBalance = data.orderPayInfoCashierVos[i].balance;
            }else if(data.orderPayInfoCashierVos[i].type == 2){
              this.entBalance = data.orderPayInfoCashierVos[i].balance;
            }else if(data.orderPayInfoCashierVos[i].type == 7){
              this.channelTaxBalance = data.orderPayInfoCashierVos[i].balance;
            }else if(data.orderPayInfoCashierVos[i].type == 8){
              this.entTaxBalance = data.orderPayInfoCashierVos[i].balance;
            }
          }
          for(var i = 0; i < data.orderPayInfoUnpaidVos.length; i++){
            this.orderSubitem.push(data.orderPayInfoUnpaidVos[i].subitem)
          }
          this.deduplicationMethod(this.taxLIst,this.orderSubitem)
        }else{
          this.$message.warning(res.message)
        }

      })
    },
    //数组对象去重
    deduplicationMethod(arr1,arr2) {
      // console.log(1,arr1)
      // console.log(2,arr2)
      let list = arr2.filter(items => {
        //循环拿到新数组的值 使用includes函数去原数组中查找
        if (arr1.includes(items)){
          //判断结构为true进入判断 并把内容返回给新数组
          return items;
        }
      })
      this.orderlistNew = list;
      console.log(121,this.orderlistNew)
    },
    //确认支付
    paymentGoEvent(){

      if(this.paymentMode == 3 || this.paymentMode == 5 || this.paymentMode == 4 || this.paymentMode == 6){
        this.qrLoding = true;
      }
      let params = {};
      params = cloneObject(this.formset);
      if(process.env.VUE_APP_MY_STR == 'test'){
        this.my = this.myTest
        params.password = encryptIt(this.my,params.password)
      }else if(process.env.VUE_APP_MY_STR == 'pro'){
        this.my = this.myPro
        params.password = encryptIt(this.my,params.password)
      }
      if(this.$route.query.po){
        let poString = this.$route.query.po;
        let po = Utils.Storage.get(po);
        params.orderNos = po[poString].value.orderNo;

      }
      if(this.$route.query.pi){
        let piString = this.$route.query.pi;
        let pi = Utils.Storage.get(pi);
        params.payInfo = pi[piString].value.payInfo;
      }
      params.payerType = this.paymentMode;
      getOrderPayUnpaidPay(params).then(res => {
        if (res.success) {
          if(res.result.status == 0){
            this.bePaidShow = false;
          }else if(res.result.status == 1){
            this.qrcode = res.result.qrcode;
            this.qrLoding = false;
            if(this.paymentMode == 3 || this.paymentMode == 5){
              this.img = '//zxcloud.oss-cn-hangzhou.aliyuncs.com/user/license/1681268433781_weixin.png'
            }else if(this.paymentMode == 4 || this.paymentMode == 6){
              this.img = '//zxcloud.oss-cn-hangzhou.aliyuncs.com/user/license/1658405884625_alipay.png'
            }

            this.codeCount()
          }else if(res.result.status == 2){
            this.$message.success('提交成功，我们会尽快处理您的订单！');
            this.$router.back();
          }

        }else{
          this.$message.warning(res.message);

        }

      })
    },
    //订单支付结果查询
    getOrderPayManualResultFun(){
      let params = {};
      if(this.$route.query.po){
        let poString = this.$route.query.po;
        let po = Utils.Storage.get(po);
        params.orderNo = po[poString].value.orderNo[0];

      }
      if(this.$route.query.pi){
        let piString = this.$route.query.pi;
        let pi = Utils.Storage.get(pi);
        params.payInfo = pi[piString].value.payInfo[0];
      }
      getOrderPayManualResult(params).then(res => {
        if (res.success) {
          this.paymentTips = res.result.status

        }else{
          this.$message.warning(res.message);

        }

      })
    },
    //开启定时器  通过codeTime的值来判断是否需要定时器
    codeCount() {
      this.codeTimer = window.setInterval(() => {
        if (this.paymentTips>1) {
          console.log('清楚定时器');
          //通过window来清除定时器
          this.clearCount()
          if(this.paymentTips == 2){
            this.bePaidShow = false;
          }
          /* 清除定时的逻辑*/
        }else {
          /*未请求到接口，继续请求数据*/
          this.getOrderPayManualResultFun();
          this.codeTime--;
        }
        console.log(this.codeTime, 'this.codeTime');
      }, 5000);
    },
    //清除定时器
    clearCount() {
      window.clearInterval(this.codeTimer);
      this.codeTimer = null;
      this.codeTime = 0;
    },
    validateToNextPassword  (rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true })
      }
      callback();
    },
    compareToFirstPassword  (rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('passwd')) {
        callback('两次输入的密码不一样！');
      } else {
        callback()
      }
    },
    handleConfirmBlur  (e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    //发送验证码
    send(){
      getSendSmsCaptcha().then(res => {
        if (res.success) {
          this.$message.success('短信发送成功！')
        }else{
          this.$message.warning(res.message)
        }
      })
      this.countDown(60);
    },
    //保存
    addCategory(){
      //请求接口
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let params = values;
          if(process.env.VUE_APP_MY_STR == 'test'){
            this.my = this.myTest
            params.passwd = encryptIt(this.my,params.passwd)
            params.passwdOk = encryptIt(this.my,params.passwdOk)
          }else if(process.env.VUE_APP_MY_STR == 'pro'){
            this.my = this.myPro
            params.passwd = encryptIt(this.my,params.passwd)
            params.passwdOk = encryptIt(this.my,params.passwdOk)
          }
          getSetPaypwd(params).then(res => {
            if (res.success) {
              this.$message.success('密码修改成功！')
              this.getOrderPayUnpaidCashierFun();
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })
    },
    // 倒计时方法
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = false;
        this.codeText = "重新发送验证码";
        return;
      } else {
        this.disabledCodeBtn = true;
        this.codeText = "重新发送验证码(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
    goTo(type){
      if(type == 1){
        this.$router.push({
          path: '/index/index',
        });
      }else if(type == 2){
        this.$router.back()
      }

    },
  },
  beforeDestroy(){
    this.clearCount()
  }
}
</script>

<style scoped lang='less'>
.content{
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  .title{
    font-size: 20px;
    font-weight: 600;
    color: #222;
  }
  .text{
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
  }
  .table-div{
    padding: 20px 0;
  }
  .header-div{
    .header-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px 0 20px;
      width: 60%;
      span{
        color: #4167E8;
        font-size: 30px;
        padding-right: 10px;
      }
    }
  }
  .table-li{
    border-bottom: 1px solid #e8e8e8;
    padding: 16px;
  }
  .table-div /deep/ .ant-table-selection-column{
    padding: 0;
  }
  .table-div /deep/ .ant-table-header-column{
    padding: 16px;
  }
  .table-div /deep/ .ant-table-row-cell-break-word{
    padding: 0;
  }
  .div-payment{
    display: flex;
    align-items: center;
    justify-content:start;
    padding: 40px 0 0;
    cursor: pointer;
    flex-wrap: wrap;
    width: 100%;
  }
  .div-template:hover{
    background: #F8FAFF;
  }
  .div-template{
    box-sizing: border-box;
    padding: 20px;
    width: 230px;
    height: 110px;
    border-radius: 4px;
    border: 2px solid #CCCCCC;
    margin:0 40px 40px 0;
    font-size: 18px;
    position: relative;
    .pos-div{
      position: absolute;
      right: -1px;
      top: 0;
      background: #D6DEFA;
      z-index: 1;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      .icontype{
        color: #4167E8;
      }
    }
  }
  .icon-type {
    color: #4167E8;
    margin-right: 10px;
  }
  .balance{
    font-size: 14px;
    span{
      font-size: 18px;
      color: #4167E8;
      font-weight: 600;
    }
  }
  .bg{
    background: #F8FAFF;
    border: 4px solid #4167E8;
    .pos-div{
      background: #4167E8;
      .icontype{
        color: #fff;
      }
    }
  }
  .bgNo{
    background: #e8e8e8;
    border: 4px solid #ccc;
    .pos-div{
      background: #e8e8e8;
      .icontype{
        color: #fff;
      }
    }
  }
  .cont-box{
    padding-bottom: 30px;
    .cont-header{
      padding: 30px 0;
    }
    .headers{
      border-bottom: 1px solid #ececec;
      padding-bottom: 30px;
    }
  }
  .payment-password-mode{
    padding-top: 30px;
  }
  /deep/.ant-form-item-children{
    display: flex;
  }
  .qr{
    width: 280px;
    height: 280px;
    position: relative;
  }
  .qr-loding{
    width: 280px;
    height: 280px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    position: absolute;
    background: rgba(0, 0, 0, 0.05);
    z-index: 10;
  }
}
</style>

